﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>企业信息管理系统-WaterCloud出品</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="~/Content/lib/layui-v2.5.5/css/layui.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        body {
            background-image: url(/Content/images/bgs.jpg);
            background-size: cover;
            font-family: 'Open Sans', sans-serif;
            background-attachment: fixed;
            background-position: center;
        }

            body:after {
                content: '';
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-filter: blur(3px);
                -moz-filter: blur(3px);
                -o-filter: blur(3px);
                -ms-filter: blur(3px);
                filter: blur(3px);
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: -1;
            }

        .layui-container {
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        .admin-login-background {
            color: #FFFFCE;
            width: 360px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 40%;
            margin-left: -180px;
            margin-top: -100px;
        }

        .logo-title {
            text-align: center;
            letter-spacing: 2px;
            padding: 14px 0;
        }

            .logo-title h1 {
                color: #FFFFCE;
                font-size: 25px;
                font-weight: bold;
            }

        .login-form {
            border: 1px solid #fff;
            border-radius: 3px;
            padding: 14px 20px;
            box-shadow: 0 0 8px #eeeeee;
        }

            .login-form .layui-form-item {
                position: relative;
            }

                .login-form .layui-form-item label {
                    position: absolute;
                    left: 1px;
                    top: 1px;
                    width: 38px;
                    line-height: 36px;
                    text-align: center;
                    color: #d2d2d2;
                }

                .login-form .layui-form-item input {
                    padding-left: 36px;
                }

        .captcha {
            width: 60%;
            display: inline-block;
        }

        .captcha-img {
            display: inline-block;
            width: 34%;
            float: right;
        }

            .captcha-img img {
                height: 34px;
                border: 1px solid #e6e6e6;
                height: 36px;
                width: 100%;
            }
        .tips_msg {
            height: 30px;
            line-height: 30px;
            color: red;
            margin: 0 auto;
            border-radius: 5px;
            width: 300px;
            font-size: 14px;
        }

            .tips_msg i {
                position: relative;
                top: 0.5px;
                font-size: 15px;
                padding-right: 5px;
            }
        #starsBox {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.75);
            opacity: .5;
        }

            #starsBox span {
                display: inline-block;
                width: auto;
                position: absolute;
                border-radius: 100%;
                transition: 100s linear;
            }

        p {
            position: fixed;
            top: 50%;
            left: 0;
            right: 0;
            text-align: center;
            transform: translateY(-50%);
            font-size: 40px;
            font-weight: 900;
            color: white;
            text-shadow: 0 0 50px black;
            text-transform: capitalize;
            font-family: 'Roboto','Helvetica','Arial',sans-serif;
            letter-spacing: 5px;
        }

            p > span {
                display: block;
                font-size: 12px;
                color: #bdc3c7;
                margin-top: 30px;
                font-weight: 100;
                text-shadow: 0 0 50px black;
                letter-spacing: 3px;
            }

                p > span > a {
                    font-weight: 700;
                    text-decoration: none;
                    color: #d64541;
                    padding-bottom: 2px;
                    border-bottom: 0px solid #d64541;
                    transition: 0.5s;
                }

                    p > span > a:hover {
                        padding-bottom: 5px;
                        border-bottom: 2px solid #d64541;
                    }
        .layui-form-item .layui-form-checkbox[lay-skin=primary] {
            margin-top: 0px;
        }
        .layui-form-checked[lay-skin=primary] i {
            border-color: orange !important;
            background-color: orange;
            color: #fff;
        }
    </style>
</head>
<body>
    @*动画特效*@
    <div id="starsBox"></div>
    <div class="layui-container">
        <div class="admin-login-background">
            <div class="layui-form login-form" >
                <form class="layui-form" action="">
                    <div class="layui-form-item logo-title">
                        <h1>企业信息管理系统</h1>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-icon layui-icon-username" for="username"></label>
                        <input type="text" id="username" lay-verify="required|account" placeholder="用户名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-icon layui-icon-password" for="password"></label>
                        <input type="password" id="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-icon layui-icon-vercode" for="captcha"></label>
                        <input id="txt_code" type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha">
                        <div class="captcha-img">
                            看不清？
                            <a id="switchCode" href="javascript:void();" style="text-decoration: none;color:orange;">换一张</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <span>
                            <input type="checkbox" name="remember_user" id="remember_user" lay-skin="primary" style="vertical-align:middle;" value="true">
                            <span style="color:#FFFFCE;vertical-align:middle;">记住密码</span>
                        </span>
                        <img id="imgcode" class="authcode" src="~/Login/GetAuthCode" align="right" width="80" height="25" />
                    </div>
                    <div class="layui-form-item">
                        <div class="login_tips"></div>
                        <button id="login_button" class="layui-btn layui-btn-fluid"style="background-color:#FFFFCE;color:orange" lay-submit="" lay-filter="login">登 入</button>
                    </div>
                    <div class="row" style="margin-top:5px;color:orange;">
                        <span>测试账号admin,密码0000</span>
                    </div>
                    @*<div class="row" style="padding: 5px 0;">
                            <button id="login_button" type="button" style="background-color:#38adff;" onclick="gotoDingTalkLogin();"><span>钉钉扫码登录</span></button>
                        </div>*@
                </form>
            </div>
        </div>
    </div>
    <script src="~/Content/lib/jquery-3.4.1/jquery-3.4.1.min.js?v=@WaterCloud.Code.Ext.ToDateString()" charset="utf-8"></script>
    <script src="~/Content/js/cookie/jquery.cookie.js?v=@WaterCloud.Code.Ext.ToDateString()"></script>
    <script src="~/Content/js/md5/jquery.md5.js?v=@WaterCloud.Code.Ext.ToDateString()"></script>
    <script src="~/Content/lib/layui-v2.5.5/layui.js?v=@WaterCloud.Code.Ext.ToDateString()" charset="utf-8"></script>
    <script src="~/Content/lib/jq-module/jquery.particleground.min.js?v=@WaterCloud.Code.Ext.ToDateString()" charset="utf-8"></script>
    <script>
        (function ($) {
            $.login = {
                formMessage: function (msg) {
                    $('.login_tips').find('.tips_msg').remove();
                    $('.login_tips').append('<div class="tips_msg"><i class="fa fa-question-circle"></i>' + msg + '</div>');
                },
                init: function () {
                    $("#switchCode").click(function () {
                        $("#imgcode").attr("src", "/Login/GetAuthCode?time=" + Math.random());
                    });
                    $("#imgcode").click(function () {
                        $("#imgcode").attr("src", "/Login/GetAuthCode?time=" + Math.random());
                    });
                    var login_error = top.$.cookie('WaterCloud_login_error');
                    if (login_error != null) {
                        switch (login_error) {
                            case "overdue":
                                $.login.formMessage('系统登录已超时,请重新登录');
                                break;
                            case "OnLine":
                                $.login.formMessage('您的帐号已在其它地方登录,请重新登录');
                                break;
                            case "-1":
                                $.login.formMessage('系统未知错误,请重新登录');
                                break;
                        }
                        top.$.cookie('WaterCloud_login_error', '', { path: "/", expires: -1 });
                    }
                },
                checkLogin: function () {
                    $.ajax({
                        url: "/Login/CheckLoginState",
                        type: "post",
                        async:false,
                        dataType: "json",
                        success: function (data) {
                            if (data.state == "success") {
                                window.location.href = "/Home/Index";
                            }
                        }
                    });
                }
            };
            $(function () {
                $.login.checkLogin();
                $.login.init();
                if ($.cookie("remember_user")) {
                    $("#remember_user").prop("checked", true);
                    $("#username").val($.cookie("username"));
                    $("#password").val($.cookie("password"));
                }
            });
            function saveUserInfo() {
                if ($("#remember_user").prop("checked") == true) {
                    var user_name = $("#username").val();
                    var user_password = $("#password").val();
                    $.cookie("remember_user", "true", {
                        expires: 7
                    }); // 存储一个带7天期限的 cookie
                    $.cookie("username", user_name, {
                        expires: 7
                    }); // 存储一个带7天期限的 cookie
                    $.cookie("password", user_password, {
                        expires: 7
                    }); // 存储一个带7天期限的 cookie
                } else {
                    $.cookie("remember_user", "false", {
                        expires: -1
                    }); // 删除 cookie
                    $.cookie("username", '', {
                        expires: -1
                    });
                    $.cookie("password", '', {
                        expires: -1
                    });
                }
            }
            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;
                // 登录过期的时候，跳出ifram框架
                if (top.location != self.location) top.location = self.location;

                //// 粒子线条背景
                //$(document).ready(function () {
                //    $('.layui-container').particleground({
                //        dotColor: '#dce4c6',
                //        lineColor: '#dce4c6'
                //    });
                //});

                // 进行登录操作
                form.on('submit(login)', function (data) {
                    saveUserInfo();
                    data = data.field;
                    if (data.username == '') {
                        layer.msg('用户名不能为空');
                        return false;
                    }
                    if (data.password == '') {
                        layer.msg('密码不能为空');
                        return false;
                    }
                    if (data.captcha == '') {
                        layer.msg('验证码不能为空');
                        return false;
                    }
                    $("#login_button").empty();
                    $("#login_button").attr('disabled', 'disabled').html("loading...");
                    $.ajax({
                        url: "/Login/CheckLogin",
                        data: { username: $.trim($('#username').val()), password: $.md5($.trim($('#password').val())), code: $.trim($('#txt_code').val()) },
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            if (data.state == "success") {
                                $("#login_button").empty();
                                $("#login_button").html("登录成功，正在跳转...");
                                window.location.href = "/Home/Index";
                            } else {
                                $("#login_button").empty();
                                $("#login_button").removeAttr('disabled').html("登 入");
                                $("#switchCode").trigger("click");
                                $('#txt_code').val('');
                                layer.msg(data.message);
                                $.login.formMessage(data.message);
                            }
                        }
                    });

                    return false;
                });
            });
        })(jQuery);

        function gotoDingTalkLogin() {
            window.location.href = "https://oapi.dingtalk.com/connect/qrconnect?appid=APPID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI";
        }
    </script>

    @*星星动画特效*@
    <script type="text/javascript">
        var cols = ['#f5d76e', '#f7ca18', '#f4d03f', '#ececec', '#ecf0f1', '#a2ded0'];
        var stars = 250;

        for (var i = 0; i <= stars; i++) {

            var size = Math.random() * 3;
            var color = cols[parseInt(Math.random() * 4)];

            $('#starsBox').prepend('<span style=" width: ' + size + 'px; height: ' + size + 'px; top: ' + Math.random() * 100 + '%; left: ' + Math.random() * 100 + '%; background: ' + color + '; box-shadow: 0 0 ' + Math.random() * 10 + 'px' + color + ';"></span>');
        };

        setTimeout(function () {
            $('#starsBox span').each(function () {
                $(this).css('top', Math.random() * 100 + '%').css('left', Math.random() * 100 + '%');
            });
        }, 1);

        setInterval(function () {
            $('#starsBox span').each(function () {
                $(this).css('top', Math.random() * 100 + '%').css('left', Math.random() * 100 + '%');
            });
        }, 100000);
    </script>
</body>
</html>